<template>
  <view class="page-content">
	  
	  <view class="swiper">
	  	<liu-slide-img :heightNumber="240" :borderRadius="20" :list="list" :type="2" :autoplay="true"
	  		:interval="3000" @change="swiperChange"></liu-slide-img>
	  </view>
	  
    <view class="flex-col gap-8 pt-8">
      <view
        class="cell text-14 flex justify-between color-black px-12 items-center"
        @click="navToTraceableAlbum"
      >
        <view class="flex gap-8 items-center">
          <text class="iconfont color-primary">&#xe600;</text>
          <text class="text-16">溯源相册</text>
        </view>
        <view class="flex" v-if="false">
          <view class="flex items-center gap-8 pr-8">
            <text>今日热销2件</text>
            <view class="reactive">
              <u-badge :isDot="true" absolute :offset="[-4, -4]"></u-badge>
              <u-image width="80rpx" height="80rpx" radius="12rpx"></u-image>
            </view>
          </view>
          <u-icon name="arrow-right" size="28rpx"></u-icon>
        </view>
      </view>

      <view
        class="cell text-14 flex justify-between color-black px-12 items-center"
        @click="navToZooSphere"
      >
        <view class="flex gap-8 items-center">
          <text class="iconfont color-primary">&#xe6e3;</text>
          <text class="text-16">好物圈</text>
        </view>
        <view class="flex" v-if="false">
          <view class="flex items-center gap-8 pr-8">
            <text>今日热销2件</text>
            <view class="reactive">
              <u-badge :isDot="true" absolute :offset="[-4, -4]"></u-badge>
              <u-image width="80rpx" height="80rpx" radius="12rpx"></u-image>
            </view>
          </view>
          <u-icon name="arrow-right" size="28rpx"></u-icon>
        </view>
      </view>

      <view
        class="cell text-14 flex justify-between color-black px-12 items-center"
        @click="navToLifeVideo"
      >
        <view class="flex gap-8 items-center">
          <text class="iconfont text-red">&#xf417;</text>
          <text class="text-16">生活号</text>
        </view>
        <view class="flex" v-if="false">
          <view class="flex items-center gap-8 pr-8">
            <text>今日热销2件</text>
            <view class="reactive">
              <u-badge :isDot="true" absolute :offset="[-4, -4]"></u-badge>
              <u-image width="80rpx" height="80rpx" radius="12rpx"></u-image>
            </view>
          </view>
          <u-icon name="arrow-right" size="28rpx"></u-icon>
        </view>
      </view>

      <view
        class="cell text-14 flex justify-between color-black px-12 items-center"
      >
        <view class="flex gap-8 items-center">
          <text class="iconfont color-warning">&#xe60e;</text>
          <text class="text-16">销量</text>
        </view>
        <view class="flex" v-if="false">
          <view class="flex items-center gap-8 pr-8">
            <text>今日热销2件</text>
            <view class="reactive">
              <u-badge :isDot="true" absolute :offset="[-4, -4]"></u-badge>
              <u-image width="80rpx" height="80rpx" radius="12rpx"></u-image>
            </view>
          </view>
          <u-icon name="arrow-right" size="28rpx"></u-icon>
        </view>
      </view>

      <view
        class="cell text-14 flex justify-between color-black px-12 items-center"
        @click="navToActivity"
      >
        <view class="flex gap-8 items-center">
          <text class="iconfont">&#xe64d;</text>
          <text class="text-16">活动报名</text>
        </view>
        <view class="flex" v-if="false">
          <view class="flex items-center gap-8 pr-8">
            <text>今日热销2件</text>
            <view class="reactive">
              <u-badge :isDot="true" absolute :offset="[-4, -4]"></u-badge>
              <u-image width="80rpx" height="80rpx" radius="12rpx"></u-image>
            </view>
          </view>
          <u-icon name="arrow-right" size="28rpx"></u-icon>
        </view>
      </view>

      <view
        class="cell text-14 flex justify-between color-black px-12 items-center"
      >
        <view class="flex gap-8 items-center">
          <text class="iconfont">&#xec5f;</text>
          <text class="text-16">AI 营养师</text>
        </view>
        <view class="flex" v-if="false">
          <view class="flex items-center gap-8 pr-8">
            <text>今日热销2件</text>
            <view class="reactive">
              <u-badge :isDot="true" absolute :offset="[-4, -4]"></u-badge>
              <u-image width="80rpx" height="80rpx" radius="12rpx"></u-image>
            </view>
          </view>
          <u-icon name="arrow-right" size="28rpx"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		list: [{
				src: 'https://images.shejidaren.com/wp-content/uploads/2022/10/68426-1.png'
			},
			{
				src: 'http://images.shejidaren.com/wp-content/uploads/2022/10/68426-9.png'
			},
			{
				src: 'https://images.shejidaren.com/wp-content/uploads/2022/10/68426-1.png'
			}
		],
		navbarBgColor: "transparent",
    };
  },
  methods: {
	swiperChange(){
		
	},
    navToTraceableAlbum() {
      uni.$u.toast("敬请期待");
      // this.$Router.push({ name: "traceableAlbum" });
    },
    navToZooSphere() {
      uni.$u.toast("敬请期待");
      // this.$Router.push({ name: "zooSphere" });
    },
    navToLifeVideo() {
      uni.$u.toast("敬请期待");
      // this.$Router.push({ name: "lifeVideo" });
    },
    navToActivity() {
      uni.$u.toast("敬请期待");
      // this.$Router.push({ name: "activityList" });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  height: 100vh;
  background-color: #f5f5f5;
  .cell {
    box-sizing: border-box;
    width: 100%;
    height: 130rpx;
    background: #fff;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  }
}
:deep(.u-badge) {
  z-index: 2 !important;
}
.iconfont {
  display: block;
  width: 40rpx;
}
</style>
